import 'package:flutter/material.dart';

class ConstraintsRoute extends StatelessWidget {
  const ConstraintsRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        child: AppBar(
          title: const Text(
            '布局原理与约束',
          ),
          titleTextStyle: const TextStyle(fontSize: 16),
          actions: const [
            Padding(
              padding: EdgeInsets.only(right: 40),
              child: UnconstrainedBox(
                child: SizedBox(
                  width: 20,
                  height: 20,
                  child: CircularProgressIndicator(
                    valueColor: AlwaysStoppedAnimation(Colors.white70),
                  ),
                ),
              ),
            ),
          ],
        ),
        preferredSize: const Size.fromHeight(40),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Builder(builder: (context) {
            var redBox = const DecoratedBox(
              decoration: BoxDecoration(color: Colors.red),
            );

            var box1 = ConstrainedBox(
              constraints: const BoxConstraints(
                minWidth: double.infinity,
                minHeight: 50,
              ),
              child: SizedBox(
                height: 5.0,
                child: redBox,
              ),
            );

            var box2 = SizedBox(
              width: 50,
              height: 50,
              child: redBox,
            );

            var box3 = ConstrainedBox(
              constraints: const BoxConstraints.tightFor(width: 50, height: 50),
              child: redBox,
            );

            var box4 = ConstrainedBox(
              constraints: const BoxConstraints(minWidth: 50, minHeight: 50),
              child: ConstrainedBox(
                constraints: const BoxConstraints(minWidth: 80, minHeight: 20),
                child: redBox,
              ),
            );

            var box5 = ConstrainedBox(
              constraints: const BoxConstraints(minWidth: 50, minHeight: 100),
              child: UnconstrainedBox(
                child: ConstrainedBox(
                  constraints:
                      const BoxConstraints(minWidth: 100, minHeight: 20),
                  child: redBox,
                ),
              ),
            );

            var box6 = AspectRatio(
              aspectRatio: 20,
              child: redBox,
            );

            var box7 = LimitedBox(
              maxWidth: 80,
              child: redBox,
            );

            return Column(
              children: <Widget>[
                box1,
                const SizedBox(height: 20),
                box2,
                const SizedBox(height: 20),
                box3,
                const SizedBox(height: 20),
                box4,
                const SizedBox(height: 20),
                box5,
                const SizedBox(height: 20),
                box6,
                const SizedBox(height: 20),
                box7,
                const SizedBox(height: 20),
              ],
            );
          }),
        ),
      ),
    );
  }
}
